<template>
	<view class="page">
		<view class="content">
			<u-form labelPosition="left">
				<!-- <u-form-item label="序号" borderBottom="true">
					<u-input v-model="code" placeholder="请输入分组序号" border="none" type="number" inputAlign="right">
					</u-input>
				</u-form-item> -->
				<u-form-item label="名称" borderBottom="true">
					<u-input v-model="name" placeholder="请输入分组名称" border="none" inputAlign="right">
					</u-input>
				</u-form-item>
			</u-form>
			<u-button text="新增分组" :color="color_value" @click="submit" shape="circle"
				:customStyle="{'width':'80%','marginTop':'15px'}">
			</u-button>
		</view>

		<view class="content" style="margin-top: 15px;">
			<u-row justify="space-between">
				<!-- <u-col span="4" textAlign="center">
					序号
				</u-col> -->
				<u-col span="4" textAlign="center">
					名称
				</u-col>
				<u-col span="4" textAlign="center">
					操作
				</u-col>
			</u-row>
			<u-row justify="space-between" v-for="(item, index) in groups" :key="index">
				<!-- <u-col span="4" textAlign="center">
					{{ item.code }}
				</u-col> -->
				<u-col span="4" textAlign="center">
					{{ item.name }}
				</u-col>
				<u-col span="4" textAlign="center" :customStyle="{color:color_value}" @click="del(item.id)">
					删除
				</u-col>
			</u-row>
		</view>

	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	export default {
		computed: {
			...mapGetters({
				imgUrl: 'common/cdnurl',
				color: 'common/color',
				color_value: 'common/color_value',
			})
		},
		data() {
			return {
				vote_id: 0,
				groups: [],
				code: '1',
				name: '',
			};
		},
		onLoad: function(options) {
			this.utils.hideShare()
			this.vote_id = options.vote_id;
			this.ajax();
		},
		methods: {
			ajax() {
				this.http('vote/group', {
					vote_id: this.vote_id
				}, 'get').then(res => {
					this.groups = res.data;
				});
			},
			submit(e) {
				let data = {}
				data.code = this.code
				data.name = this.name
				if (!data.code) {
					uni.$u.toast('请输入序号')
					return;
				}
				if (!data.name) {
					uni.$u.toast('请输入名称')
					return;
				}
				data.vote_id = this.vote_id;
				data.type = 'insert';
				this.http('vote/group', data, 'post').then(res => {
					uni.$u.toast(res.msg)
					// this.code = '';
					this.name = '';
					this.ajax();
				});
			},

			del(id) {
				var data = {};
				data.id = id;
				data.vote_id = this.vote_id;
				data.type = 'del';
				uni.showModal({
					title: '删除分组',
					content: '分组下有选手将不可删除，请先将选手移出分组',
					success: res => {
						if (res.confirm) {
							this.http('vote/group', data, 'get').then(res => {
								uni.$u.toast(res.msg)
								this.ajax();
							});
						}
					}
				})
			}
		}
	};
</script>

<style lang="scss">
	.content {
		padding: 30rpx 30rpx 30rpx;
		background-color: #fff;
		
		.u-row{
			line-height: 45px;
			border-bottom: 1px solid #eee;
		}
	}

	
</style>
